<template>
  <div onTap="cancelModalContainer" class="modalContainer">
  <div class="modal">
    <div class="title">
      <div class="titleContent">
        <label>{{toast.title}}</label>
      </div>
    </div>
    <div class="btns">
      <div  @click="cancelModal()" v-if='toast.showCancel' class="cancelBtn">{{toast.cancelText}}</div>
      <div  @click="confirmModal()" class="confirmBtn">{{toast.confirmText}}</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: 'ComToast',
  data () {
    return {
     
    }
  },
  props:{
        toast:{
          type:Object
        }
  },
  methods:{
         cancelModal:function(){
          this.$emit('cancelModal')
         },
         confirmModal:function(){
         this.$emit('confirmModal')
         }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.modalContainer{ 
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 

    background: rgba(0,0,0,.4);
    z-index: 999
}
.modalContainer .modal{
    width: 5.40rem;
    height: 3rem;
    background: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: .14rem;
    overflow: hidden;
}
.modalContainer .modal .title{
  
    text-align: center;
    padding:.42rem .27rem .29rem;
    position: relative;
}
.modalContainer .modal .title::after{
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: .01rem solid #f2f2f2;
}
.modalContainer .modal .title .titleContent{
    display: inline-block;
    text-align: left;
    min-height: .85rem;
    text-align: center;
}
.modalContainer .modal .title .titleContent.onLine{
    line-height: .85rem;
}
.modalContainer .modal .title .titleContent label{
 line-height: .43rem;
 font-size: .30rem;
 font-family:PingFangSC-Regular;
 color:#333333;
}
.modalContainer .modal .btns{
   display: flex;
   font-size: .36rem;
}
.modalContainer .modal .btns div{
    flex: 1;
    text-align: center;
    line-height: 1rem;
    color:#999999;
    font-family: PingFangSC-Regular;
}
.modalContainer .modal .btns div:last-child{
    position: relative;
    color:#b6885a
}
.modalContainer .modal .btns div:last-child::after{
    position: absolute;
    content:"";
    left: 0;
    top: 0;
    bottom:0;
    border-left: .01rem solid #f2f2f2;
}
</style>
